<template>
  <div>
    <header>
      <section>
        <p>ToDoList</p>
        <input
          type="text"
          placeholder="添加ToDo"
          id="add"
          @keydown="addTodo"
          v-model="value"
        />
      </section>
    </header>

    <main>
      <section>
        <!-- 正在进行的列表 -->
        <div class="doList">
          <div class="title">
            <h2>正在进行</h2>
            <span class="todoCount">{{ unSelectedList.length }}</span>
          </div>

          <ul class="list">
            <li v-for="task in unSelectedList" :key="task.id">
              <input type="checkbox" v-model="task.checked" />
              <p>{{ task.task }}</p>
              <a href="#" @click="deleteTask(task)"></a>
            </li>
          </ul>
        </div>

        <!-- 已完成的列表 -->
        <div class="doneList">
          <div class="title">
            <h2>已完成</h2>
            <span class="doneCount">{{ selectedList.length }}</span>
          </div>

          <ul class="list">
            <li v-for="task in selectedList" :key="task.id">
              <input type="checkbox" v-model="task.checked" />
              <p>{{ task.task }}</p>
              <a href="#" @click="deleteTask(task)"></a>
            </li>
          </ul>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      todoList: [],
    };
  },
  methods: {
    addTodo(e) {
      // 判断是不是回车键(keyCode===13)，如果不是回车键，则终止该函数
      if (e.keyCode !== 13) return;

      // 如果输入的值为空，则终止该函数
      if (!this.value.trim()) return;

      // 将任务推入到 todoList 列表中
      /**
       *  推入的数据是一个对象，对象包含以下几个属性：
       *    id: 可以用于设置 key 值
       *    task: 任务
       *    checked: 表示当前任务的勾选状态
       */
      this.todoList.push({
        id: this.todoList.length + 1,
        task: this.value,
        checked: false,
      });

      // 清空输入框
      this.value = '';
    },
    deleteTask(task) {
      const index = this.todoList.indexOf(task);
      this.todoList.splice(index, 1);
    },
  },
  // 计算属性默认是只读的，它的值完全来源于所依赖的数据
  // 如果要改变计算属性的值，本质上就是去操作所依赖数据的状态
  computed: {
    /**
     *  当勾选复选框时，会通过 v-model 将该任务对象中的 checked 值进行改变
     *  只要 checked 一改变，计算属性所依赖的 this.todoList 也发生了改变
     *  计算属性监听到依赖发生变化时，就会马上重新进行计算
     *  所以，当每次勾选时，计算属性筛选出的列表，都是符合条件的列表
     */
    selectedList() {
      return this.todoList.filter(task => task.checked === true);
    },
    unSelectedList() {
      return this.todoList.filter(task => task.checked === false);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body {
  background-color: #cdcdcd;
}

header {
  height: 50px;
  background: rgba(47, 47, 47, 0.98);
}

section {
  width: 600px;
  margin: 0 auto;
}

header section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}

header section p {
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
}

header section input {
  width: 50%;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
  border: none;
  outline: none;
  padding: 5px 10px;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title h2 {
  margin: 20px 0;
}

.title span {
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #e6e6fa;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.list li {
  height: 32px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-left: 5px solid #629a9c;
  border-radius: 3px;
  margin-bottom: 10px;
}

.list input {
  width: 22px;
  height: 22px;
  margin-left: 20px;
  margin-right: 15px;
  cursor: pointer;
}

.list p {
  flex: 1;
}

.list a {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 6px double #fff;
  margin-right: 10px;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

a:hover {
  background-color: red;
}
</style>
